<template>
  <panel :text='text'>
    <van-button size="mini" slot="right" round>查看全部</van-button>
    <swipe :width='width' :bounce='false'>
      <swipe-item v-for="(songs, index) of rankList" :key="index">
        <div class="songs-wrapper">
          <div class="rank-title">
            <i class="iconfont icon-huo"/>
            <span>{{ songs[0].rankName }}</span>
          </div>
          <card v-for="(song, index) of songs"
                :image='song.picUrl'
                :imageWidth='50'
                :imageHeight='50'
                :key="index"
                class="song"
                direction="row"
          >
          <i slot="row-right" class="iconfont icon-bofang1"/>
          <div slot="leftContent" class="rank-content">
            <span>{{ index + 1 }}</span>
            <span>{{ song.name }}</span>
            <span class="singers">-{{ song.singers }}</span>
          </div>
          </card>
          <div class="bg" :style="getBg(songs[0].picUrl)"></div>
        </div>
      </swipe-item>
    </swipe>
  </panel>
</template>
<script>
import Swipe from 'base/swipe/swipe'
import SwipeItem from 'base/swipe/swipe-item'
import Card from 'base/card'
import Panel from 'base/panel'
import Song from '@/entity/Song'
import { detail } from 'api/playlist'
import { mapActions } from 'vuex'

import { getNotRepeatNum } from '@/utils'

export default {
  components: {
    Card,
    Panel,
    Swipe,
    SwipeItem
  },
  data() {
    return {
      rankList: [],
      rankListCount: 3 // 随机获取榜单数量
    }
  },
  mounted() {
    this.getToplist().then(toplist => this.getRankList(toplist))
  },
  computed: {
    width() {
      return window.screen.width * 0.9
    },
    text() {
      return '热歌风向标'
    }
  },
  methods: {
    getRankList(toplist) {
      let randomNums = getNotRepeatNum(0, toplist.length - 1, this.rankListCount)
      let ids = []

      for (let index = 0; index < randomNums.length; index++) {
        ids.push(toplist[randomNums[index]].id)
      }

      let promises = []
      for (let index = 0; index < ids.length; index++) {
        promises.push(detail({ id: ids[index] }))
      }

      Promise.all(promises).then(results => {
        results.forEach((detail, i) => {
          const { playlist: { tracks, name } } = detail
          if (tracks.length > 3) {
            this.rankList.push([])
            for (let index = 0; index < 3; index++) {
              const track = tracks[index]
              track.rankName = name
              this.rankList[i].push(
                new Song(track)
              )
            }
          }
        })
      })
    },
    getBg(image) {
      return {
        'background-image': `url(${image})`
      }
    },
    ...mapActions(['getToplist'])
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';

.recommendCard{
  /deep/ .column-content{
    text-align: left;
  }
}
.songs-wrapper{
  position: relative;
  padding-left: 5px;
  padding: 10px;
  margin: 0 10px;
  border-radius: 10px;
  overflow: hidden;
  color: white;
  .song{
    margin: 10px 0;
  }
  .rank-title{
    font-size: @font-size-normal;
    i{
      font-size: 1em;
    }
  }
  .rank-content{
    width: 100%;
    .ellipsis();
    .singers{
      color: #ddd;
      font-size: @font-size-mini;
    }
  }
}
.bg{
  display: block;
  position: absolute;
  color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 100%;
  border-radius: 10px;
  filter: blur(5px);
  z-index: -1;
}
/deep/ .right{
  width: 70px !important;
}
/deep/ .van-button--mini{
  min-width: 70px;
}
</style>
